<template>
    <!-- 路由出口，指定要将页面内容渲染到什么地方 -->
    <router-view></router-view>

    <van-tabbar v-model="active" @change="onChange">
        <van-tabbar-item icon="home-o" replace to="/">自由市场</van-tabbar-item>
        <van-tabbar-item icon="plus" replace to="fabuxianzhi">发布闲置</van-tabbar-item>
        <van-tabbar-item icon="chat-o" replace to="messagelist">消息</van-tabbar-item>
        <van-tabbar-item icon="contact-o" replace to="personal">我的</van-tabbar-item>
    <!-- <van-tabbar v-model="active" @change="onChange">
        <van-tabbar-item icon="home-o" replace to="/">自由市场</van-tabbar-item>
        <van-tabbar-item icon="plus" replace to="fabuxianzhi">发布闲置</van-tabbar-item>
        <van-tabbar-item icon="chat-o" replace to="messagelist">消息</van-tabbar-item>
        <van-tabbar-item icon="contact-o" replace to="personal">我的</van-tabbar-item> -->

    </van-tabbar>
</template>
<script setup>
import { ref } from 'vue';
import { showToast } from 'vant'
//TODO 需要根据用户访问路径，动态设置 active 默认被选中的标签
const active = ref('');
const onChange = (index) => showToast(`${index}`);
</script>
  